<template>
	<view class="h100">
		<my-scroll class="h100 p-10" @scrolltolower="scrolltolower" backTop>
			<template v-for="(item,i) in list">
				<view class="item">
					<view class="flex">
						<up-text :text="item.告警描述" size="16" color="#333333" />
					</view>
					<view class="flex s-end">
						<view class="f1 w0">
							<template
								v-for="(item2,i) in [{title:'告警分类',key:'告警分类' },{title:'告警类型',key:'告警类型'},{title:'告警时间',key:'告警时间'}]"
								:key="i">
								<view class="flex m-y-4">
									<view class="flex s-center">
										<up-text :text="`${item2.title}：`" color="#525866" size="14" />
									</view>
									<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
								</view>
							</template>
						</view>
						<up-tag :text="item.设备名称" plain size="mini" />
					</view>
				</view>
			</template>
		</my-scroll>
	</view>
</template>

<script setup>
	/**************************************请求数据*************************************************/
	import {
		getByApiCode
	} from "@/api/customApi";

	let list = ref([]),
		total = 0,
		pageIndex = 1;

	function fn() {
		getByApiCode({
			apiCode: "driverWarningInfo",
			pageIndex,
			pageSize: 20,
			propertyMapping: {
				告警分类: "WARNING_TYPE",
				告警描述: "ALERT_MESSAGE",
				告警时间: "ALERT_START_TIME",
				告警类型: "alertType",
				设备名称: "DEVICE_CODE"
			},
			total: true
		}).then(res => {
			list.value.push(...res.data);
			total = res.total
		})
	}

	// 滚动到底部加载数据
	function scrolltolower() {
		if (list.value.length <= total) {
			pageIndex++;
			fn()
		}
	}
	fn()
</script>

<style lang="scss" scoped>
	.item {
		padding: 10px;
		background: #fff;
		border-radius: 8px;
		background-image: url('@/static/img/header.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;

		+.item {
			margin-top: 10px;
		}
	}

	:deep() {
		.u-modal__content {
			box-sizing: border-box;
		}

		.u-modal__content {
			font-size: 0;
			padding: 10px !important;
		}

		.image {
			border: 1px solid rgb(214, 215, 217);
			border-radius: 4px !important;
		}
	}
</style>